<template>
  <div class="overlay" v-if="visible">
    <div class="head">
      <span>{{ data.cameraName || '' }}</span>
      <svg-icon name="close" @click="close"></svg-icon>
    </div>
    <div class="view">
      <div class="view-left">
        <VideoPlay :url="cameraUrl" />
      </div>
      <div class="view-right">
        <div class="common">
          <div class="title">摄像机巡视点位</div>
          <div
            v-for="(item, index) in data.patrolPointCameraVOS"
            :key="index"
            class="common-item"
            @click="movePoint(item)"
          >
            {{ item.name }}
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, nextTick } from 'vue'
import VideoPlay from './VideoPlay.vue'
import { cameraPointInfo, moveCameraPoint } from './serve.api'

const visible = ref(false)

const data = ref({
  cameraName: '',
  videoUrl: '',
  patrolPointCameraVOS: []
})

const cameraUrl = ref('')

const close = () => {
  visible.value = false
}

function movePoint(item: any) {
  if (!item.positionNum) return

  moveCameraPoint({
    id: item.cameraId,
    positionNum: item.positionNum
  })
}

const showModal = async (value: any) => {
  if (value) {
    visible.value = true
    console.log(value, '弹窗显示，设备信息')

    nextTick(() => {
      cameraPointInfo({
        // id: 'JQ-220KV-142'
        id: value
      }).then((res) => {
        data.value = res
        setTimeout(() => {
          cameraUrl.value = res.videoUrl
        }, 200)
      })
    })
  }
}

defineExpose({ showModal, close })
</script>

<style lang="less" scoped>
.overlay {
  position: fixed;
  top: 6rem;
  right: 1.25rem;
  min-width: 45.625rem;
  background-color: #fff;
  border-radius: 0.5rem;

  .head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 1rem;
    height: 2.5rem;
    border-radius: 0.5rem 0.5rem 0 0;
    border-bottom: 1px solid #e5e6eb;

    span {
      font-weight: 800;
    }

    .svg-icon {
      cursor: pointer;
    }
  }

  .view {
    display: flex;
    padding: 1rem;

    &-left {
      width: 28rem;
    }

    &-right {
      padding: 1rem;
      background-color: #f2f3f4;
      flex: 1;
    }
  }
}

.common {
  overflow: hidden scroll;
  scrollbar-width: none;

  .title {
    font-weight: 800;
    margin-bottom: 0.25rem;
  }

  &-item {
    line-height: 2rem;
    padding: 0 0.75rem;
    border-radius: 0.125rem;
    border-left: 0.125rem solid transparent;

    &:hover {
      background-color: rgb(0 121 106 / 16%);
      border-left: 0.125rem solid #00796a;
      cursor: pointer;
    }
  }
}
</style>
